<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js"></script>
    {include file="common/meta" /}

    <style type="text/css">
        body {
            color:#999;
            background:url('/assets/img/loginbg.png');
            background-size:cover;
        }
        a {
            color:#fff;
        }
        .login-panel{margin-top:150px;}
        .login-screen {
            max-width:400px;
            padding:0;
            margin:100px auto 0 auto;

        }
        .login-screen .well {
            border-radius: 3px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /*background: rgba(255,255,255, 0.2);*/
            background: #fff;
        }
        .login-screen .copyright {
            text-align: center;
        }
        @media(max-width:767px) {
            .login-screen {
                padding:0 20px;
            }
        }
        .profile-img-card {
            width: 100px;
            height: 100px;
            margin: 10px auto;
            display: block;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
        .profile-img-quert{
            width: 125px;
            height: 125px;
            margin: 50px auto;
            display: block;
        }
        .profile-name-card {
            text-align: center;
        }

        #login-form {
            margin-top:20px;
        }
        #login-form .input-group {
            margin-bottom:15px;
        }
        .input-group-addon{
            padding: 3px;
        }
        .glyphicon-user1{
            width: 23px;
            height: 23px;
            display: block;
            background:url('/assets/img/user.png') no-repeat center;
            background-size: 100%;
        }
        .glyphicon-lock1{
            width: 23px;
            height: 23px;
            display: block;
            background:url('/assets/img/password.png') no-repeat center;
            background-size: 100%;
        }
        .glyphicon-option-horizontal1{
            width: 23px;
            height: 23px;
            display: block;
            background:url('/assets/img/yzm.png') no-repeat center;
            background-size: 100%;
        }
        .btn-success{
            background-color: #3C89FF;
            border-radius: 20px;
            width: 80%;
            margin: 0 auto;
        }
        .sendmsg{
            width: 30%;
            text-align: center;
            padding: 0;
            line-height: 30px;
        }
        .top-right{
            width: 200px;
            height: 30px;
            left: 180px;
            top: 0px;
            /*float: right;*/
            /*float: right;*/
            margin-right: 5%;
            /*margin-top: -10px;*/
            position: relative;
            /*display: block;*/
            /*-moz-border-radius: 50%;*/
            /*-webkit-border-radius: 50%;*/
            /*border-radius: 50%;*/
        }
        .top-left-text{
            float: left;
            position: relative;
            width: 60px;
            height: 30px;
            left: 0;
            top: 0;
        }
        .text-bg{
            background: url('/assets/img/text-bg.png') no-repeat center;
            background-size:80%;
            width: 80px;
            height: 32px;
            line-height: 32px;
            text-align:center;
            /*margin-right: 5%;*/
            float:left;
            color: #3C89FF;
        }
        .middle{
            width: 160px;
            height: 50px;
            margin: 10px auto;
            margin-top: -10px;
            display: block;
            position: relative;
            top: -20px;
        }
        .middle-left{
            width: 50px;
            height: 50px;
            /*margin: 0px auto;*/
            display: block;
            float: left;
            color:#3C89FF;
        }
        .middle-left img{
            width: 40px;
            height: 40px;
            margin-top:5px;
            margin-left: 20px;
        }
        .middle-right{
            width: 80px;
            height: 50px;
            line-height: 25px;
            font-size: 10px;
            /*margin: 0px auto;*/
            display: block;
            float: left;
            margin-left: 20px;
        }
        .right{
            width: 30px;
            height: 30px;
            margin-top: 3px;
            /*margin-left: 20px;*/
        }
        .blue{
            color:#3C89FF;
        }
        #dragBg {
            position: relative;
            background-color: #2f99fb;
            width: 350px;
            height: 40px;
        }
        /* 滑动验证容器文本 */
        #dragText {
            position: relative;
            width: 100%;
            height: 100%;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
            line-height: 42px;
            /* 文本不允许选中 */
            user-select: none;
            -webkit-user-select: none;
        }
        /* 滑块 */
        #dragHandler {
            position: relative;
            width: 40px;
            height: 40px;
            cursor: move;
        }
        /* 滑块初始背景 */
        .dragHandlerBg {
            border: 1px solid #ddd;
            background: #fff no-repeat center url("");
        }
        /* 验证成功时的滑块背景 */
        .dragHandlerOkBg{
            border: 1px solid #2f99fb;
            background: green;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login-wrapper" style="position: absolute;right: 150px;clear: both;">
        <div class="login-screen" style="width: 380px;">
            <div class="well">
                <div class="login-form" id="password-login">
                    <div class="top-right">
                        <div class="text-bg" style="margin-left: 60px;">扫码登录</div>
                        <img id="erwei-img" class="right" src="__CDN__/assets/img/erwei.png" onclick="goerwei()"/>
                    </div>
                    <img id="erwei" class="profile-img-card" src="__CDN__/assets/img/avatar.png" />
                    <p id="profile-name" class="profile-name-card"></p>

                    <form action="" method="post" id="login-form" autocomplete="off">
                        <div id="errtips" class="hide"></div>
                        {:token()}
                        <div class="input-group">
                            <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-user1" aria-hidden="true">
                                        <!--<img class="profile-img-card" src="__CDN__/assets/img/user.png" />-->
                                        </span>
                            </div>
                            <input type="text" class="form-control" id="pd-form-username" placeholder="请输入手机号" name="username" autocomplete="off" value="" data-rule="required"/>
                        </div>
                        <!--                                <div class="input-group">-->
                        <!--                                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock1" aria-hidden="true"></span></div>-->
                        <!--                                    <input type="text" class="form-control" style="width: 100%;" placeholder="请输入密码" name="password" autocomplete="off" value="" data-rule="required"  style="width: 70%" />-->
                        <!--                                </div>-->
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock1" aria-hidden="true"></span></div>
                            <input type="text" class="form-control" id="pd-form-password" placeholder="请输入验证码" name="password" autocomplete="off" value="" data-rule="required"  style="width: 70%" />
                            <input type="button" class="form-control sendmsg" id="sendmsg" value="获取短信验证码" style="width: 30%" onclick="onsend(this)"/>
                        </div>
                        <div id="dragContainer" style="display:none;">
                            <div id="dragBg"><div id="dragHandler" class="dragHandlerBg"></div></div>
                            <div id="dragText"></div>

                        </div>
                        {if $config.fastadmin.login_captcha}
                        <!--<div class="input-group">-->
                        <!--<div class="input-group-addon"><span class="glyphicon glyphicon-option-horizontal1" aria-hidden="true"></span></div>-->
                        <!--<input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length(4)" />-->
                        <!--<span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">-->
                        <!--<img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="30" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/>-->
                        <!--</span>-->
                        <!--</div>-->
                        {/if}
                        <!--                                <div class="form-group">-->
                        <!--                                    <label class="inline" for="keeplogin">-->
                        <!--                                        <input type="checkbox" name="keeplogin" id="keeplogin" value="1" />-->
                        <!--                                        &lt;!&ndash;{:__('Keep login')}&ndash;&gt;-->
                        <!--                                        阅读并同意登陆协议-->
                        <!--                                    </label>-->
                        <!--                                </div>-->
                        <div class="form-group">
                            <button type="submit" class="btn btn-success btn-lg" disabled>{:__('Sign in')}</button>
                            <!--<button type="submit" class="btn btn-success btn-lg">{:__('Sign in')}</button>-->
                        </div>
                    </form>
                </div>
                <div class="login-form" id="erwei-login" style="display:none;">
                    <div class="top-left-text">
                        扫码登录
                    </div>
                    <div class="top-right">
                        <div class="text-bg">密码登录</div>
                        <img id="com-img" class="right" src="__CDN__/assets/img/com.png" onclick="gocom()"/>
                    </div>
                    <img id="profile-img" class="profile-img-quert" src="__CDN__/assets/img/login-erwei.png" />
                    <div class="middle">
                        <div class="middle-left"><img src="__CDN__/assets/img/sao.png"></div>
                        <div class="middle-right">
                            <span class="blue">打开</span> <span>教育app</span><br>
                            <span class="blue">扫一扫登录</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="position:absolute;bottom:50px;left:50%;margin-left:-200px;width:400px;text-align:center;font-size: 18px;color:white;font-family:'Microsoft Yahei';">由北京慧亦家教育科技有限公司提供技术支持</div>
</div>
{include file="common/script" /}
<script>
    var myCaptcha = _dx.Captcha(document.getElementById('dragContainer'), {
        appId: '{$captcha.app_id}', //appId，在控制台中“应用管理”或“应用配置”模块获取
        success: function (token) {
            // console.log('token:', token)
            $('.btn-lg').removeAttr('disabled');
            var obj = $('#sendmsg');
            send(obj);
        }
    })
</script>
<script>
    var flag = true;
    $('.btn-lg').click(function(){
        if($(this).attr('disabled')=='disabled'){
            Toastr.error('请先进行滑动验证！');
        }
    })
    function goerwei(){
        $('#password-login').css('display','none')
        $('#erwei-login').css('display','block')
    }
    function gocom(){
        $('#erwei-login').css('display','none')
        $('#password-login').css('display','block')
    }
    function onsend(obj){
        $('#dragContainer').css('display','block')
    }
    function send(obj)
    {
        var phone = $('#pd-form-username').val();
        if(phone == ''){
            flag = false;
            Toastr.error('请输入手机号');
            return false;
        }
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            flag = false;
            Toastr.error('手机号码格式有误，请重填');
            return false;
        }
        if(flag){
            var countdown = 60;
            function setTime(obj) {
                if (countdown == 0) {
                    $(obj).attr("disabled",false);
                    $(".sendmsg").val("获取短信验证码");
                    countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
                    return;
                } else {
                    $(obj).attr("disabled",true);
                    $(".sendmsg").val(countdown + " s 重新发送");
                    countdown--;
                }
                setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
            }
            $.ajax({
                url:'sms/send',
                data: {mobile:phone,event:'login',pagetype:'web'},
                type:'POST',
                dataType: "json",
                success: function (res) {
                    Toastr.error(res.msg);
                    if(res.code == 1){
                        setTime(obj);
                        $('#dragContainer').css('display','block')
                    }
                }
            });
        }

    }
</script>
<script>
    window.onload = function() {
        var dragContainer = document.getElementById("dragContainer");
        var dragBg = document.getElementById("dragBg");
        var dragText = document.getElementById("dragText");
        var dragHandler = document.getElementById("dragHandler");

        //滑块最大偏移量
        var maxHandlerOffset = dragContainer.offsetLeft + dragContainer.offsetWidth - dragHandler.offsetWidth;
        //是否验证成功的标记
        var isVertifySucc = false;
        initDrag();

        function initDrag() {
            dragText.textContent = "拖动滑块验证";
            dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
        }

        function onDragHandlerMouseDown() {
            document.addEventListener("mousemove", onDragHandlerMouseMove);
            document.addEventListener("mouseup", onDragHandlerMouseUp);
        }

        function onDragHandlerMouseMove() {
            /*
            html元素不存在width属性,只有clientWidth
            offsetX是相对当前元素的,clientX和pageX是相对其父元素的
            */
            var left = event.clientX - dragHandler.clientWidth / 2;
            console.log(event.clientX);
            if(left < dragContainer.offsetLeft) {
                left = dragContainer.offsetLeft;
            } else if(left > maxHandlerOffset) {
                left = maxHandlerOffset;
                verifySucc();
            }
            dragHandler.style.left = left - dragContainer.offsetLeft + "px";
            dragBg.style.width = dragHandler.style.left;
        }

        function onDragHandlerMouseUp() {
            document.removeEventListener("mousemove", onDragHandlerMouseMove);
            document.removeEventListener("mouseup", onDragHandlerMouseUp);
            dragHandler.style.left = 0;
            dragBg.style.width = 0;
        }

        //验证成功
        function verifySucc() {
            console.log(2323);
            isVertifySucc = true;
            dragText.textContent = "验证通过";
            $('.btn-lg').removeAttr('disabled');
            dragText.style.color = "greenblue";
            // dragHandler.setAttribute("class", "dragHandlerOkBg");
            dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
            document.removeEventListener("mousemove", onDragHandlerMouseMove);
            document.removeEventListener("mouseup", onDragHandlerMouseUp);
        }
    }
</script>
</body>
</html>